<html>

<head>
    <style>
        html,
        body {
            background-color: transparent;
            font-family: "Microsoft YaHei", "黑体", "宋体";
            overflow-y: hidden;
        }

        @keyframes Qiaqia {
            from {
                opacity: 0;
                transform: scale3d(1, 1, 1);
            }

            10%,
            20% {
                transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -3deg);
            }

            30%,
            50%,
            70%,
            90% {
                transform: scale3d(2, 2, 2) rotate3d(0, 0, 1, 3deg);
            }

            40%,
            60%,
            80% {
                transform: scale3d(2, 2, 2) rotate3d(0, 0, 1, -3deg);
            }

            to {
                opacity: 1;
                transform: scale3d(1, 1, 1);
            }
        }

        @-webkit-keyframes Qiaqia {
            from {
                opacity: 0;
                transform: scale3d(1, 1, 1);
            }

            10%,
            20% {
                transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -3deg);
            }

            30%,
            50%,
            70%,
            90% {
                transform: scale3d(2, 2, 2) rotate3d(0, 0, 1, 3deg);
            }

            40%,
            60%,
            80% {
                transform: scale3d(2, 2, 2) rotate3d(0, 0, 1, -3deg);
            }

            to {
                opacity: 1;
                transform: scale3d(1, 1, 1);
            }
        }

        @keyframes popup {
            from {
                opacity: 0;
                transform: translate(0, 0) scale3d(0.5, 0.5, 1);
            }

            50% {
                transform: translate(0, 0) scale3d(1.2, 1.2, 1);
            }

            to {
                opacity: 1;
                transform: scale3d(1, 1, 1);
            }
        }

        @-webkit-keyframes popup {
            from {
                opacity: 0;
                transform: translate(0, 0) scale3d(0.5, 0.5, 1);
            }

            50% {
                transform: translate(0, 0) scale3d(1.2, 1.2, 1);
            }

            to {
                opacity: 1;
                transform: scale3d(1, 1, 1);
            }
        }

        @keyframes popup-up {
            from {
                opacity: 0;
                transform: translate(0, 1em) scale3d(1, 1, 1);
            }

            75% {
                transform: translate(0, 0) scale3d(1.2, 1.2, 1);
            }

            to {
                opacity: 1;
                transform: translate(0, 0) scale3d(1, 1, 1);
            }
        }

        @-webkit-keyframes popup-up {
            from {
                opacity: 0;
                transform: translate(0, 1em) scale3d(1, 1, 1);
            }

            75% {
                transform: translate(0, 0) scale3d(1.2, 1.2, 1);
            }

            to {
                opacity: 1;
                transform: translate(0, 0) scale3d(1, 1, 1);
            }
        }

        @keyframes up {
            from {
                transform: translate(0, 0.5em) scale3d(1, 1, 1);
            }

            to {
                transform: translate(0, -0.5em) scale3d(1, 1, 1);
            }
        }

        @-webkit-keyframes up {
            from {
                transform: translate(0, 0.5em) scale3d(1, 1, 1);
            }

            to {
                transform: translate(0, -0.5em) scale3d(1, 1, 1);
            }
        }

        .zbdonation-log {
            font-family: 'SF Pro SC', 'Microsoft YaHei';
            font-weight: bold;
            font-size: 22px;
            color: #FAFAFA;
            position: fixed;
            left: 0;
            top: 0;
        }

        .zbdonation-list {
            list-style-type: none;
        }

        .zbdonation-row {
            position: absolute;
            top: 1em;
            left: 1em;
            margin-top: 1.4em;
            width: 12em;
            height: 2em;
            background: rgba(35, 24, 54, 0.9);
            border-radius: 5px;
            transition: 1s all;
            -webkit-transition: 1 all;
        }

        .zbdonation-row.active {
            animation: popup 1s;
            -webkit-animation: popup 1s;
        }

        .zbdonation-row.hidden {
            opacity: 0;
        }

        .zbdonation-gift__hd {
            width: 2.6em;
            height: 2.6em;
            position: absolute;
            left: 0.2em;
            top: -1em;
            border: 4px solid rgb(0, 0, 0);
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 0 2px rgba(35, 24, 54, 0.8), inset 0 0 2px rgba(35, 24, 54, 0.8);
        }

        .zbdonation-gift__hd img {
            width: 100%;
            height: 100%;
        }

        .zbdonation-gift__bd {
            margin: 0 2em 0 2.8em;
            height: 2em;
            transform: scale(0.8) translate(0, 0);
        }

        .zbdonation-gift__bd .zbdonation-donator_name {
            font-size: 0.6em;
            display: block;
            height: 1.66em;
            line-height: 1.66em;
            color: #1c6cc1;
            text-shadow: 0 0 2px rgba(0, 0, 0, .5);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .zbdonation-gift__bd .zbdonation-gift_name {
            font-size: 0.5em;
            display: block;
            height: 1.66em;
            line-height: 1.66em;
            color: rgba(255, 255, 255, .8);
        }

        .zbdonation-gift__fd {
            position: absolute;
            top: 0;
            right: 0.8em;
            height: 2em;
            line-height: 2em;
            font-weight: 300;
        }

        .zbdonation-gift__fd p {
            position: relative;
            margin: 0;
            display: inline-block;
            font-size: 0.8em;
            color: #ebc421;
            font-style: italic;
        }

        .zbdonation-gift__fd p.active {
            animation: Qiaqia 1s;
            -webkit-animation: Qiaqia 1s;
        }

        .zbdonation-gift__fd p i {
            display: inline-block;
            font-size: 0.6em;
            position: absolute;
            height: 1em;
            line-height: 1em;
        }

        .zbdonation-gift__fd p i.multiple {
            bottom: 1em;
            left: -0.8em;
        }

        .zbdonation-gift__fd p i.arrow {
            display: inline-block;
            opacity: 0;
            bottom: 0.3em;
            right: -0.8em;
        }

        .zbdonation-gift__fd p span {
            display: inline-block;
        }

        .zbdonation-gift__fd.active p span {
            animation: popup-up 0.5s;
            -webkit-animation: popup-up 0.5s;
        }

        .zbdonation-gift__fd img {
            width: 1.4em;
            height: 1.4em;
            margin-right: 1em;
            margin-top: 0.3em;
            position: absolute;
            left: -2.2em;
        }
    </style>
    <script src="http://cdn.bootcss.com/socket.io/1.7.2/socket.io.min.js"></script>
    <script src="https://cdn.bootcss.com/pubsub-js/1.5.7/pubsub.min.js"></script>
    <script src="./js/gift.js"></script>
</head>

<body>
    <div class="zbdonation-log" style="font-size: 22px; transform: scale(0.9);">
        <div class="zbdonation-list">
            <div data-id="天天" data-gift="龙虾" class="zbdonation-row active" style="background-color: rgb(35, 24, 54); top: 0em;">
                <div class="zbdonation-gift__hd" style="border: 4px solid RGBA(35,24,54,1)">
                    <img src="./img/juying.jpeg" class="zbdonation_badge">
                </div>
                <div class="zbdonation-gift__bd">
                    <span class="zbdonation-donator_name" style="color:#1c6cc1">天天</span>
                    <span class="zbdonation-gift_name" style="color:#F1F1F1">赠送 龙虾</span>
                </div>
                <div class="zbdonation-gift__fd">
                    <img src="http://i8.pdim.gs/2501073df4d559bc0cf1a7092464532c.png">
                    <p class="active">
                        <i class="multiple">×</i>
                        <span>32</span>
                        <i class="arrow">↑</i>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js"></script>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">

        <script>
            window.channel = 'mock';
            window.roomid = 'mock';
        </script>
        <script type="text/javascript">
            // Create WebSocket connection.
            const socket = new WebSocket('ws://221.228.196.111:8080/sub');

            // Connection opened
            socket.addEventListener('open', function (event) {
                socket.send('j@97376');
            });

            // Listen for messages
            socket.onmessage = function (event) {
                var data = JSON.parse(event.data)
                console.log(data.type, data.data);
                
            }
        </script>

        <script>
            var connected = false;
            PubSub.subscribe("connect", function (msg, data) {
                connected = true;
                //if(vol>0)
                //zbmate.play_audio("智播为您服务","msgaudio",spd,per,vol);
            });
            PubSub.subscribe("disconnect", function (msg, data) {
                connected = false;
            });
            PubSub.subscribe("chatmsg", function (msg, data) {
                //data.nn is nick name
                //data.ic is avatar
                //data.txt is txt
            });
            PubSub.subscribe("uenter", function (msg, data) {
                //data.nn is nick name
                //data.ic is avatar

            });
            PubSub.subscribe("dgb", function (msg, data) {
                //data.nn is nick name
                //data.ic is avatar
                //data.gift.name is gift name
                //data.gift.icon is gift icon link
                giftList.push(data); window.setTimeout(appendText, 1500);
                console.log(data);
                
            });
            zbmate.connect();
            var max_cnt = 6;
            var en_avatar = true;
            var sHex = "#231836";
            var donatorColor = "#1c6cc1";
            var giftColor = "#F1F1F1";
            var sAlpha = 100.0;
            sAlpha = 100; /*0~100*/
            sAlpha = sAlpha.toFixed(1) / 100.0;
            var fontSize = 22;

            $('.zbdonation-log').css({ 'fontSize': fontSize + 'px', 'transform': 'scale(' + (max_cnt > 5 ? (1.5 - 0.1 * max_cnt) : 1) + ')' });

            String.prototype.colorRgba = function (alph) {
                var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

                var sColor = this.toLowerCase();
                if (sColor && reg.test(sColor)) {
                    if (sColor.length === 4) {
                        var sColorNew = "#";
                        for (var i = 1; i < 4; i += 1) {
                            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
                        }
                        sColor = sColorNew;
                    }
                    //hex
                    var sColorChange = [];
                    for (i = 1; i < 7; i += 2) {
                        sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
                    }
                    return "RGBA(" + sColorChange.join(",") + "," + alph + ")";
                } else {
                    return sColor;
                }
            };

            var sRgbColor = sHex.colorRgba(sAlpha);

            var giftList = [];
            var storage = [];
            var banimating = false;

            function appendText(data) {
                if (banimating === true) return;

                var loglen = $(".zbdonation_row").length;

                if (loglen > max_cnt) {
                    return;
                }

                if (giftList.length < 1) {
                    return;
                }

                var data = giftList[0];
                var storageIndex = -1;

                storage.map(function (item, index) {
                    if (item.nn == data.nn && item.gift.name == data.gift.name) {
                        item.gfcnt = parseInt(item.gfcnt) + parseInt(data.gfcnt);
                        data.gfcnt = item.gfcnt;
                        storageIndex = index;
                    }
                })

                giftList.splice(0, 1);

                if (storageIndex == -1) {

                    storage.push(data)

                    addRow(data.nn, data.nn, data.gift.name, data.gfcnt, data.ic, data.gift.gif ? data.gift.gif : data.gift.icon, sRgbColor, donatorColor, giftColor);

                } else {
                    var showing_index = -1;

                    $(".zbdonation-row").each(function (i) {
                        if ($(this).data('id') == data.nn && $(this).data('gift') == data.gift.name) {
                            var item = $(this).find('.zbdonation-gift__fd p')
                            item.removeClass('active');
                            setTimeout(function () {
                                item.find('span').text(data.gfcnt); item.addClass('active');
                            }, 100);

                            showing_index = i;
                        }
                    });

                    if (showing_index == -1) {
                        addRow(data.nn, data.nn, data.gift.name, data.gfcnt, data.ic, data.gift.gif ? data.gift.gif : data.gift.icon, sRgbColor, donatorColor, giftColor);
                    }
                }

            }

            function addRow(id, name, giftName, count, headerUrl, giftUrl, bgColor, donatorColor, giftColor) {

                var txtstyle = " style='background-color:" + bgColor + "; top:" + ($(".zbdonation-row").length * 3.4) + "em;'";

                var headerStyle = " style='border: 4px solid " + bgColor + "'";
                var donatorStyle = " style='color:" + donatorColor + "'";
                var giftStyle = " style='color:" + giftColor + "'";

                if (en_avatar) {
                    txt2 = "<img src=" + headerUrl + " class='zbdonation_badge' />";
                } else {
                    txt2 = "";
                }

                var txt1 = "<div data-id='TemplateId' data-gift='TemplateGift' class='zbdonation-row active'" + txtstyle + "><div class='zbdonation-gift__hd'" + headerStyle + ">" + txt2 + "</div><div class='zbdonation-gift__bd'><span class='zbdonation-donator_name'" + donatorStyle + ">TemplateName</span><span class='zbdonation-gift_name'" + giftStyle + ">赠送 TemplateMsg</span></div><div class='zbdonation-gift__fd'><img src='TemplateImg'><p class='active'><i class='multiple'>×</i><span>TemplateCount</span><i class='arrow'>↑</i></p></div>"; // Create text with HTML

                //preload image
                new Image().src = giftUrl;

                var txt2 = txt1.replace(new RegExp('TemplateImg', 'g'), giftUrl);
                txt1 = txt2.replace("TemplateName", name);
                txt2 = txt1.replace("TemplateMsg", giftName);
                txt1 = txt2.replace("TemplateCount", count);
                txt2 = txt1.replace("TemplateId", id);
                txt1 = txt2.replace("TemplateGift", giftName);

                $(".zbdonation-list").append(txt1);

                banimating = true;

                $(".zbdonation-row:last").one("animationend webkitAnimationEnd", cleanlist);
            }

            function adjustPosition() {
                $(".zbdonation-row").each(function (index) {
                    $(this).css("top", (index * 3.4) + 'em');
                });
            }

            function exchangePosition(index, count) {
                if (banimating === true) return;
                banimating = true;
                $(".zbdonation-row").each(function (i) {
                    if (i === index) {
                        $(this).remove();
                        $(".zbdonation-list").append($(this));
                        changeNum($(this).find('.zbdonation-gift__fd p span'), count, $(this).find('.zbdonation-gift__fd p span').text());
                        $(this).find('.zbdonation-gift__fd').addClass('active');
                        $(this).css({ "top": (($(".zbdonation-row").length - 1) * 3.4) + 'em', 'z-index': 9 });
                    } else if (i > index) {
                        $(this).css("top", (index * 3.4) + 'em');
                    }
                })
                setTimeout(function () {
                    $(".zbdonation-row").each(function (i) {
                        if (i === index) {
                            banimating = false;
                            $(this).css('z-index', 1).removeClass('active');
                            $(this).find('.zbdonation-gift__fd p span').text(count);
                            $(this).find('.zbdonation-gift__fd').removeClass('active');
                        }
                    })
                }, 1000)
            }

            function changeNum(item, to, from) {
                from = parseInt(from);
                to = parseInt(to);
                var i = to - from;
                var refresh = Math.ceil(i / 10);
                var interval = setInterval(k, 100);
                function k() {
                    item.text(from);
                    from += refresh;
                    if (from > to) {
                        clearInterval(interval);
                    }
                }
            }

            function cleanlist() {
                banimating = false;
                var loglen = $(".zbdonation-row").length;
                if (loglen >= max_cnt) {
                    var row = $(".zbdonation-row:first");
                    row.addClass('hidden');
                    setTimeout(function () {
                        row.remove();
                        adjustPosition();
                    }, 900);
                }
            }
        </script>
</body>

</html>